<template>
  <view style="padding-top: 100rpx;">
    <view class="HeadPortraitContainer">
      <view class="HeadPortrait">
        <img :src="userImg" alt="">
      </view>
    </view>

    <view class="OperatingOptionsContainer">
      <navigator url="/pages/LearningPush/LearningPush">
        <view class="logoContainer">
          <view class="logo">
            <image src="../../static/彩虹.png"></image>
          </view>
        </view>
        学习推送签收
      </navigator>
      <navigator url="/pages/DailySummary/DailySummary">
        <view class="logoContainer">
          <view class="logo">
            <image src="../../static/松树.png"></image>
          </view>
        </view>
        学员每日总结
      </navigator>
      <navigator url="/pagesB/feedback/feedback">
        <view class="logoContainer">
          <view class="logo">
            <image src="../../static/城市公园.png"></image>
          </view>
        </view>学习每日反馈
      </navigator>
      <navigator url="/pagesB/selfAssessment/selfAssessment">
        <view class="logoContainer">
          <view class="logo">
            <image src="../../static/落日.png"></image>
          </view>
        </view>学员自我评价
      </navigator>
      <navigator url="/pagesB/MyClass/MyClass">
        <view class="logoContainer">
          <view class="logo">
            <image src="../../static/麦田.png"></image>
          </view>
        </view>我的班级
      </navigator>
      <navigator url="/pagesB/interviewManagement/interviewManagement">
        <view class="logoContainer">
          <view class="logo">
            <image src="../../static/秋天.png"></image>
          </view>
        </view>面试点评
      </navigator>
      <navigator url="/pages/attendance/attendance">
        <view class="logoContainer">
          <view class="logo">
            <image src="../../static/松树.png"></image>
          </view>
        </view>学员考勤情况
      </navigator>
      <navigator url="/pages/attendance/attendance">
        <view class="logoContainer">
          <view class="logo">
            <image src="../../static/天气.png"></image>
          </view>
        </view>功能未开发
      </navigator>
      <navigator url="/pages/attendance/attendance">
        <view class="logoContainer">
          <view class="logo">
            <image src="../../static/山水.png"></image>
          </view>
        </view>功能未开发
      </navigator>
    </view>
  </view>
</template>

<script>
  import {
    getUserHead
  } from '@/api/login.js'
  export default {
    data() {
      return {
        userImg: ""
      }
    },
    methods: {
      async getUser() {
        const result = await getUserHead()
        this.userImg = result.data.msg.replace(/[\r\n]/g, '');

      }
    },
    onLoad() {
      this.getUser()
    }
  }
</script>
<style>
  page {
    padding-bottom: 40rpx;
    background-color: #fff;
  }
</style>
<style scoped>
  .HeadPortraitContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 384rpx;
    height: 380rpx;
    border-radius: 50%;
    margin: 80rpx auto 100rpx;
    border: 2px solid #797979;
    /* marign-top: 100rpx; */
  }

  .HeadPortrait {
    width: 320rpx;
    height: 314rpx;
    border-radius: 50%;
  }

  .HeadPortrait image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }

  .OperatingOptionsContainer {
    display: flex;
    flex-wrap: wrap;
  }

  .logoContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    margin: 0 auto;
  }

  .logo {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
  }

  .logo image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }

  .OperatingOptionsContainer navigator {
    /* margin: 40rpx auto; */
    /* display: flex;
    justify-content: center;
    align-items: center; */
    width: 32.7%;
    height: 250rpx;
    /* background-color: #e4e4e4; */
    /* border-radius: 5px; */
    /* border: 1px solid #ccc; */
    color: #26a4f9;
    text-align: center;
  }
</style>
